<template>
<div class="main">
    <div id="pic"></div>
    <!-- <div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">节点关系提示区</div> -->
    <el-drawer title="我是标题" :close-on-click-modal="true" :show-close="true" :visible.sync="drawer" :direction="direction">
        <span>{{info}}</span>
    </el-drawer>
</div>
</template>

<script>
import echarts from "echarts";
export default {
    mounted() {
        this.drawing();
    },
    data() {
        return {
            drawer: false,
            info: {

            },
            direction: "ltr",
            webkitDep: {
                categories: [
                    //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
                    {
                        name: "企业关系" //企业关系
                    },
                    {
                        name: "银行关系" //银行关系
                    },
                    {
                        name: "合作关系" //合作关系
                    }
                ],
                nodes: [
                    //展示的节点
                    {
                        name: "天阳宏业", //节点名称
                        symbolSize: 60,
                        level: 1,
                        tooltip: "项目名称:天阳宏业<br/>到位资金:314<br/>拨付资金:743<br/>余额:-429",
                        symbol: "roundRect",
                        category: 0 //与关系网类别索引对应，此处只有一个关系网所以这里写0
                    },
                    {
                        name: "南方事业部",
                        symbolSize: 40,
                        level: 2,
                        depth: 0,
                        category: 0
                    },
                    {
                        name: "北方事业部",
                        symbolSize: 40,
                        level: 2,
                        category: 0
                    },
                    {
                        name: "福建",
                        symbolSize: 20,
                        level: 3,
                        category: 0
                    },
                    {
                        name: "广州",
                        symbolSize: 20,
                        level: 3,
                        category: 0
                    },
                    {
                        name: "北京",
                        symbolSize: 20,
                        level: 3,
                        category: 0
                    },
                    {
                        name: "成都",
                        symbolSize: 20,
                        level: 3,
                        category: 0
                    },
                    {
                        name: "中国人民银行", //节点名称
                        symbolSize: 60,
                        level: 1,
                        category: 1 //与关系网类别索引对应，此处只有一个关系网所以这里写0
                    },
                    {
                        name: "建设银行", //节点名称
                        symbolSize: 60,
                        level: 1,
                        category: 1 //与关系网类别索引对应，此处只有一个关系网所以这里写0
                    },
                    {
                        name: "中国证监会", //节点名称
                        symbolSize: 80,
                        level: 1,
                        category: 2 //与关系网类别索引对应，此处只有一个关系网所以这里写0
                    }
                ],
                links: [
                    //节点之间连接
                    {
                        source: 0, //起始节点，0表示第一个节点
                        target: 1 //目标节点，1表示与索引为1的节点进行连接
                    },
                    {
                        source: 0,
                        target: 2
                    },
                    {
                        source: 1,
                        target: 3
                    },
                    {
                        source: 1,
                        target: 4
                    },
                    {
                        source: 2,
                        target: 5
                    },
                    {
                        source: 2,
                        target: 6
                    },
                    {
                        source: 7,
                        target: 9
                    },
                    {
                        source: 7,
                        target: 8
                    }
                ]
            }
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        addNodes() {
            for (var index = 0; index < 250; index++) {
                var n = Math.floor(Math.random() * 3);
                var m = Math.floor(Math.random() * index);
                var element = {
                    name: "节点" + index,
                    symbolSize: 10,
                    level: 3,
                    category: n
                };
                var linkitem = {
                    source: 10 + index,
                    target: m
                };
                this.webkitDep.links.push(linkitem);
                this.webkitDep.nodes.push(element);
            }
        },
        openOrFold(params) { //该事件会提示节点间关系
            var str = this.appendPath(params);
            // document.getElementById("main_1").innerHTML = str;
            return str;
        },
        handelClick(params) {
            if (params.dataType == "node") {
                //点击线是不能搜索的，因此判断触发点击事件的数据是否是节点
                if (params.data.level == "3") {
                    alert("已经是最后一级了哈");
                } else {
                    this.drawer = true;
                    this.info = params.data;
                    this.myChart.setOption(this.option)
                }
            }
        },
        appendPath(params) { //拼接节点关系并显示在左下角
            var option = this.myChart.getOption();
            var series = option.series[params.seriesIndex]; //获取图表
            var nodesOption = series.data; //获取所有数据
            var links = series.edges; //获取所有连线
            if (params.dataType == "node") { //dataType可以是edge(线条)或node(数据)
                var id = params.data.id;
                var categoryName = series.categories[params.data.category].name; //获取当前节点的图例名称
                var str = categoryName + ":" + nodesOption[id].name;
                var i = 0;
                var map = {};
                for (i = 0; i < links.length; i++) {
                    map[links[i].source] = links[i].target;
                }
                while (true) {
                    if (map[id] == undefined) {
                        break;
                    }
                    //获取父节点的图例名称并连接
                    str = series.categories[nodesOption[map[id]].category].name + ":" + nodesOption[map[id]].name + "->" + str;
                    id = map[id];
                }
                return str;
            } else if (params.dataType == "edge") { //当鼠标停留在连线上时，暂不处理
                return "";
            }
        },
        drawing() {
            this.addNodes();
            let width = document.documentElement.clientWidth || document.body.clientWidth;
            let height = document.documentElement.clientHeight || document.body.clientHeight;
            console.log(width, height);
            let picDom = document.getElementById("pic")
            picDom.style.width = `${width}px`;
            picDom.style.height = `${height}px`;
            const myChart = echarts.init(picDom);
            var option = {
                title: {
                    text: "视图简介：企业关系谱",
                    x: "right",
                    y: "bottom"
                },
                toolbox: {
                    show: true, //是否显示工具栏组件
                    orient: "horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'
                    itemSize: 15, //工具栏 icon 的大小
                    itemGap: 10, //工具栏 icon 每项之间的间隔
                    showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
                    feature: {
                        mark: { // '辅助线开关'
                            show: true,
                            title:"辅助线"
                        },
                        restore: { //配置项还原。
                            show: true, //是否显示该工具。
                            title: "还原",
                        },
                        saveAsImage: { //保存为图片。
                            show: true, //是否显示该工具。
                            type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。
                            name: "pic1", //保存的文件名称，默认使用 title.text 作为名称
                            backgroundColor: "#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
                            title: "保存为图片",
                            pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
                        },
                        dataZoom: { //数据区域缩放。目前只支持直角坐标系的缩放
                            show: true, //是否显示该工具。
                            title: "缩放", //缩放和还原的标题文本
                            xAxisIndex: 0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
                            yAxisIndex: false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
                        },
                    },
                    zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
                    z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
                    left: "right", //组件离容器左侧的距离,'left', 'center', 'right','20%'
                    top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
                    right: "auto", //组件离容器右侧的距离,'20%'
                    bottom: "auto", //组件离容器下侧的距离,'20%'
                    width: "auto", //图例宽度
                    height: "auto", //图例高度
                },

                noDataEffect: 'none',
                legend: {
                    //表头控件
                    show: true,
                    data: [{
                            name: "企业关系",
                            icon: "rect"
                        }, //icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                        {
                            name: "银行关系",
                            icon: "triangle"
                        },
                        {
                            name: "合作关系",
                            icon: "pin"
                        }
                    ] //此处的数据必须和关系网类别中name相对应
                },
                tooltip: {
                    show: true, //默认显示
                    showContent: true, //是否显示提示框浮层
                    trigger: "item", //触发类型，默认数据项触发
                    triggerOn: "mousemove", //提示触发条件，mousemove鼠标移至触发，还有click点击触发
                    alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
                    showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
                    hideDelay: 200, //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
                    enterable: false, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
                    position: "right", //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
                    confine: false, //是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
                    transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
                    formatter: function (params, ticket, callback) {}
                },
                series: [{
                    type: "graph",
                    layout: "force",
                    
                    // type: "force",
                    name : "Force tree",
                    ribbonType: false,
                    animation: false,
                    label: {
                        normal: {
                            show: true,
                            position: "top"
                        }
                    },
                    legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。
                    hoverAnimation: true, //是否开启鼠标悬停节点的显示动画
                    coordinateSystem: null, //坐标系可选
                    xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
                    yAxisIndex: 0, //y轴坐标 
                    edgeSymbol: ['none', 'arrow'],
                    roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    nodeScaleRatio: 0.6, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
                    draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。
                    edgeSymbolSize: 10, //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
                    minRadius: 5,
                    maxRadius: 8,
                    gravity: 1.1,
                    scaling: 1.1,
                    steps: 10,
                    large: true,
                    useWorker: true,
                    coolDown: 0.995,
                    ribbonType: false,
                    lineStyle: {
                        //==========关系边的公用线条样式。
                        normal: {
                            color: "rgba(222,0,23,0.4)",
                            width: "1",
                            type: "dashed", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                            curveness: 0.2, //线条的曲线程度，从0到1
                            opacity: 1
                            // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                        },
                        emphasis: {
                            //高亮状态
                        }
                    },
                    data: this.webkitDep.nodes.map(function (node, idx) {
                        node.id = idx;
                        node.itemStyle = {
                            normal: {
                                //默认样式
                                label: {
                                    show: true
                                },
                                borderType: "solid", //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
                                borderColor: "rgba(120,215,0,0.4)", //设置图形边框为淡金色,透明度为0.4
                                borderWidth: 2, //图形的描边线宽。为 0 时无描边。
                                opacity: 1
                                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                            },
                            emphasis: {
                                //高亮状态
                            }
                        };
                        node.label = {
                            normal: {
                                show: true,
                                position: "outside", //标签的位置。['50%', '50%'] [x,y]
                                textStyle: {
                                    //标签的字体样式
                                    color: "#873", //字体颜色
                                    fontStyle: "normal", //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                                    fontWeight: "bolder", //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200
                                    fontFamily: "sans-serif", //文字的字体系列
                                    fontSize: 10 //字体大小
                                }
                            }
                        };
                        return node;
                    }),
                    categories: this.webkitDep.categories,
                    focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
                    force: {
                        //力引导图基本配置
                        initLayout: "", //力引导的初始化布局，默认使用xy轴的标点
                        repulsion: 20, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                        gravity: 0.01, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                        edgeLength: [50, 80], //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                        layoutAnimation: true
                        //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
                    },
                    edges: this.webkitDep.links
                }]
            };
            myChart.setOption(option);
            this.myChart = myChart;
            this.option = option

            myChart.on("click", this.handelClick)
            //'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 
            myChart.on("mouseover", this.openOrFold)
        }
    }
};
</script>

<style lang="less" scoped>

</style>

 
​
